<template>
  <z-modal
    :width="800"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
         <a-row>
          <a-col :span="12" >
            <a-form-model-item label="字段名称" prop="columnName">
              <a-input placeholder="请输入方案编码" :disabled="disableSubmit" v-model.trim="form.columnName"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="标签" prop="label">
              <a-input placeholder="请输入接口" :disabled="disableSubmit" v-model.trim="form.label"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="级别" prop="level">
              <a-input placeholder="请输入文件名称" :disabled="disableSubmit" v-model.trim="form.level"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="宽度" prop="width">
              <a-input-number class="!w-full" placeholder="请输入宽度" :disabled="disableSubmit" v-model.trim="form.width"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="顺序" prop="sort">
              <a-input-number class="!w-full"  :disabled="disableSubmit" placeholder="请输入顺序" v-model.trim="form.sort"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12" >
            <a-form-model-item label="数据对齐方式">
              <a-radio-group :disabled="disableSubmit" v-model="form.dataAlign" button-style="solid">
                <a-radio-button  :value="0">左对齐</a-radio-button >
                <a-radio-button  :value="1">居中</a-radio-button >
                <a-radio-button  :value="2">右对齐</a-radio-button >
              </a-radio-group>
            </a-form-model-item>
          </a-col>
         </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
export default {
  name: 'ExcelExportColumnModal',
  mixins: [ModalFormMixin],
  props: {
    solutionId: {
      type: String
    },
    tableLoading: Boolean
  },
  data() {
    return {
      validatorRules: {
        columnName: [{ required: true, message: '请输入字段名称' }],
        label: [{ required: true, message: '请输入标签' }],
        width: [{ required: true, message: '请输入宽度' }],
        sort: [{ required: true, message: '请输入顺序' }],
        level: [{ required: true, message: '请输入级别' }]
      },
      url: {
        add: '/excel/export/solution/column/add',
        edit: '/excel/export/solution/column/edit'
      }
    }
  },
  methods: {
    addAfter() {
      this.$set(this.form, 'bgColor', '#ffffff')
      this.$set(this.form, 'fontColor', '#000000')
      this.$set(this.form, 'level', 1)
      this.$set(this.form, 'width', 120)
      this.$set(this.form, 'dataAlign', 1)
    },
    validateDictCode(rule, value, callback) {
      // 重复校验
      var params = {
        tableName: 'sys_dict',
        fieldName: 'dict_code',
        fieldVal: value,
        dataId: this.model.id
      }
      console.log(params)
      callback()
      // duplicateCheck(params).then((res) => {
      //   if (res.success) {
      //     callback()
      //   } else {
      //     callback(res.message)
      //   }
      // })
    },
    classifyIntoFormData() {
      this.form.solutionId = this.solutionId
      return {
        ...this.form
      }
    }
  }
}
</script>
